<!--
 * @Author: wuxiangyi
 * @Date: 2022-09-04 15:59:51
 * @LastEditors: wuxiangyi
 * @LastEditTime: 2022-09-05 10:45:51
 * @FilePath: /my-project/src/components/Son.vue
 * @Description: 
 * 
-->
<template>
    <div>
        <el-card class="box-card" style="overflow: scroll;width: 100%">
            <div slot="header" class="clearfix" v-bind:style="{textAlign:'left'}">
                <el-radio v-model="props.condition" label="AND">AND</el-radio>
                <el-radio v-model="props.condition" label="OR">OR</el-radio>
                <div style="float: right;">
                    <el-button type="danger" size="small" @click="deleteGroup">Delete Group</el-button>
                    <el-button type="success" icon="el-icon-plus" size="small" @click="addRule">Add rule</el-button>
                    <el-button type="success" icon="el-icon-plus" size="small" @click="addGroup">Add group</el-button>
                </div>
            </div>
            <div class="text item" v-for="(obj,key) in props.rule" :key="key">
                <el-select v-model="obj.col" placeholder="请选择" :size="size">
                    <el-option v-for="item in colOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="obj.con" placeholder="请选择" :size="size">
                    <el-option v-for="item in conOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-input placeholder="请输入内容" style="width: 200px" :size="size" v-model="obj.value"></el-input>
                <el-button type="danger" :size="size" @click="deleteRule(key)" style="float: right">
                    Delete
                </el-button>
                <el-divider></el-divider>
            </div>
            <div class="text item" v-for="(obj,key) in props.group" :key="key">
                <Son :props="props.group[key]" :currentKey="key" @get="onGet" />
            </div>
        </el-card>
    </div>
</template>
<script>
var data = {
    colOptions: [
    {
      value: 'user_id',
      label: 'user_id'
    }, 
    {
      value: 'name',
      label: 'name'
    }, 
    {
      value: 'create_time',
      label: 'create_time'
    }, 
    {
      value: 'type',
      label: 'type'
    }
  ],
  conOptions: [
    {
      value: 'equal',
      label: 'equal',
    },
    {
      value: 'not equal',
      label: 'not equal'
    }
  ],
}
export default {
    name: 'Son',
    data () {
        return data
    },
    props: ['props','currentKey'],
    methods: {
        addRule() {
            this.props.rule.push({
                col: "user_id",
                con: "equal",
                value: ""
            })
        },
        // 删除规则
        deleteRule(key) {
            this.props.rule.splice(key, 1);
        },
        // 添加组
        addGroup() {
            this.props.group.push({
                condition: "AND",
                rule: [
                    {
                        col: "user_id",
                        con: "equal",
                        value: ""
                    }
                ],
                group: []
            });
        },
        // 删除组
        deleteGroup() {
            console.log('删除')
            this.$emit('get' , this.currentKey)
        },
        // 删除组信息回调
        onGet(param) {
          this.props.group.splice(param , 1)
        },
    }
}
</script>
<style>
h1,
h2 {
    font-weight: normal;
}

.hello {
    height: 100vh;
    width: 50vw;
    margin: auto;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) */
}

.text {
    font-size: 14px;
    text-align: left;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
    
}
</style>